use([
    "public/javascripts/service/changePWService.js",
    "public/common/des.js"
], function(changePWService, Des) {
    var PageComponent = React.createClass({
        eventObj: {},
        countdown:60,
        componentDidMount: function() {
            $("#tips").hover(function () {
                $("#tipsMsg").css('display','block')

            },function () {
                $("#tipsMsg").css('display','none')
            })
            $("#phoneNumber").attr('maxlength',"11");
            $("#passwordNew").attr('maxlength','18');
            $("#passwordVertify").attr('maxlength','18');
        },
        receiveMsg: function(data) {

        },
        CheckPhoneExists:function () {
            var param={
                mobilePhone:this.state.phoneNumber
            }
            var that = this;

            changePWService.checkPhoneExist(param,function (returnData) {
                if(returnData.errorCode !=0) {


                }else{
                    if(!returnData.data){
                        that.setState({phoneNotExist: true})
                        $("#phoneNumber").css('border-color','red');
                        $("#phone-notExist").css('display','block')
                        that.setPhoneVerticalInvalid()

                    }else{
                        that.setState({phoneNotExist: false})
                        $("#phoneNumber").css('border-color','#dddddd');
                        $("#phone-notExist").css('display','none')
                        if(that.countdown == 60){
                            that.setPhoneVerticalValid()
                        }

                    }

                }

            })

        },
        setPhoneVerticalInvalid:function () {
            $('#phone-vertical').attr('disabled',true)
            $('#phone-vertical').css('color','#d6dae6')
            $('#phone-vertical').css('cursor','not-allowed')
        },
        setPhoneVerticalValid:function () {
            $('#phone-vertical').attr('disabled',false)
            $('#phone-vertical').css('color','#eb4b51')
            $('#phone-vertical').css('cursor','pointer')
        },
        clickToGetPhoneVerticalNumber:function () {

            var flag = $('#phone-vertical').attr('disabled');
            if(!this.state.phoneNumber || this.state.phoneNumberErr || flag == 'disabled') {
                return;
            }

            this.getPhoneVerticalNumber();

        },
        getPhoneVerticalNumber:function () {
            if(!this.state.phoneNumber  || this.state.phoneNotExist){
                return;
            }

            var param={
                mobilePhone:this.state.phoneNumber
            }

            if (this.countdown == 0) {
                this.setPhoneVerticalValid();
                this.countdown = 60;
                console.log("60s after")
                $('#phone-vertical').text("重新发送")
                return;
            } else {
                if(this.countdown == 59){
                    changePWService.getPhoneVertify(param,function (returnData) {

                        if(returnData.errorCode !=0) {


                        }else{
                            if(!returnData.data){
                                $("#vertify-error").css('display','block')
                            }else{
                                $("#vertify-error").css('display','none')
                            }

                        }
                    })

                }
                this.setPhoneVerticalInvalid();
                console.log(this.countdown);
                $('#phone-vertical').text("重新发送(" + this.countdown + ")");
                this.countdown--;
            }
            var that = this;
            setTimeout(function() {
                    that.getPhoneVerticalNumber() }
                ,1000)

        },

        nextStep:function () {
            var param ={
                mobilePhone:this.state.phoneNumber,
                validateCode:this.state.identifyCode
            };
            var that=this;
            if(!this.state.phoneNumber || !this.state.identifyCode || this.state.phoneNotExist){
                return;
            }

            changePWService.checkPhoneVertify(param,function (returnData) {
                if(returnData.errorCode == 0 && returnData.data == true) {
                    console.log(returnData);
                    that.jumpToStepTwo();
                }else{
                    $("#vertifyCode-error").css('display','block');
                    $("#identifyCode").css('border-color','red')
                }
            })
        },
        Clear:function () {
            $("#vertifyCode-error").css('display','none');
            $("#identifyCode").css('border-color','#dddddd');
        },
        getInitialState: function () {
            return {
                phoneNumber:'',
                phoneNotExist:false,
                identifyCode:'',
                vertifyCodeError:false,
                passwordNew:'',
                passwordVertify:'',
                passWordLevel :'original',
                ExistNoSupWord:false,
                ExistPwNotSame:false,
                ExistPwLow:false
            };
        },
        ChangeValue: function(event) {
            var name = event.target.name;
            var value = event.target.value;
            this.eventObj[name] = value;
            this.setState(this.eventObj);
        },
        confirmModify:function () {
            var that = this;

            if(!this.state.passwordNew || !this.state.passwordVertify) {
                return;
            }

            this.CheckNewPwRule();
            this.CheckPwTwiceSame();
            if(this.state.ExistPwLow || this.state.ExistPwNotSame){
                return;
            }

            var param={
                telNo: this.state.phoneNumber,
                newPassword: Des.enc(this.state.passwordNew),
                confirmPassword: Des.enc(this.state.passwordVertify)
            }
            changePWService.modifyPassword(param,function (returnData) {
                if(returnData.errorCode  == 0){
                    that.jumpToStepThree();
                }
            })
        },
        jumpToStepTwo:function () {
            $("#stepOne").css("display","none");
            $("#stepTwo").css("display","block");
            $("#stepThree").css("display","none");

            $('#circleStep1').removeClass("red");
            $('#circleStep1').addClass("gray");
            $('#circleStep2').removeClass("gray");
            $('#circleStep2').addClass("red");
            $('#circleStep3').removeClass("red");
            $('#circleStep3').addClass("gray");
        },
        jumpToStepThree:function () {
            $("#stepOne").css("display","none");
            $("#stepTwo").css("display","none");
            $("#stepThree").css("display","block");

            $('#circleStep1').removeClass("red");
            $('#circleStep1').addClass("gray");
            $('#circleStep2').removeClass("red");
            $('#circleStep2').addClass("gray");
            $('#circleStep3').removeClass("gray");
            $('#circleStep3').addClass("red");

        },
        initPasswordStrength:function() {
            var O_color = "#eeeeee";
            document.getElementById("strength_L").style.background = O_color;
            document.getElementById("strength_M").style.background = O_color;
            document.getElementById("strength_H").style.background = O_color;
            this.setState({passWordLevel: 'original'});

        },
        CalcLevel:function(mode) {
            var level = 0;
            for(var indexj=0;indexj<4;indexj++){
                if(mode & 1) {
                    level++;
                }
                mode >>>=1;
            }
            return level;

        },
        checkPwFormat:function (event) {

            console.log(this.state.passwordNew)
            var password = this.state.passwordNew;

            var O_color = "#eeeeee";
            var L_color = "#f6cd8a";
            var M_color = "#fab749 ";
            var H_color = "#f68c23";
            var level = 0;

            var mode = 0;
            var Lcolor;
            var Mcolor;
            var Hcolor;

            this.setState({ExistNoSupWord: false});
            this.setState({ExistPwLow: false});



            if (password == null || password == ''|| password == undefined) {
                Lcolor = Mcolor = Hcolor = O_color;
                mode = 0;
            }else{
                console.log(password.length,"password.length")
                for (var index = 0; index < password.length; index++) {
                    var charMode;
                    var regSpecial = /((?=[\x21-\x7e]+)[^A-Za-z0-9])/;;
                    var regNumber = /[0-9]+/;
                    var regLowercase = /[a-z]+/;
                    var regCapital = /[A-Z]+/;

                    var singleWord = password.charAt(index);
                    console.log(singleWord,"singleWord");

                    // 判断输入密码的类型
                    if (regNumber.test(singleWord)) { //数字
                        charMode = 1;
                    }
                    else if (regCapital.test(singleWord)) //大写
                        charMode = 2;
                    else if (regLowercase.test(singleWord)) //小写
                        charMode = 4;
                    else if(regSpecial.test(singleWord)){
                        charMode = 8;  //特殊字符
                    }else{
                        //不支持的字符
                        this.setState({ExistNoSupWord: true});
                        this.initPasswordStrength();
                        return;
                    }

                    mode |= charMode;

                    var typeNumber = this.CalcLevel(mode);

                }

                console.log(password.length,"password.length");
                console.log(typeNumber,"typeNumber");

                if( typeNumber== 0 || password.length >18){
                    Lcolor = Mcolor = Hcolor = O_color;
                    this.setState({passWordLevel: 'original'});

                }else if(password.length < 6 || (typeNumber <= 2) ){
                    Lcolor = L_color;
                    Mcolor = Hcolor = O_color; ///低优先级
                    this.setState({passWordLevel: 'low'});
                }else if((password.length >=6 && password.length <=9 && typeNumber == 3) ||
                    (password.length >=6 && password.length <=7 && typeNumber == 4)){
                    Lcolor = Hcolor = O_color;
                    Mcolor = M_color; ///中级
                    this.setState({passWordLevel: 'normal'});
                }else if((password.length >=10 && password.length <=18 && typeNumber == 3) ||
                    (password.length >=8 && password.length <=18 && typeNumber == 4))
                {
                    Hcolor = H_color; ///高级
                    Lcolor = Mcolor = O_color;
                    this.setState({passWordLevel: 'high'});
                }else{
                    Lcolor = Mcolor = Hcolor = O_color;
                    this.setState({passWordLevel: 'original'});
                }

            }
            document.getElementById("strength_L").style.background = Lcolor;
            document.getElementById("strength_M").style.background = Mcolor;
            document.getElementById("strength_H").style.background = Hcolor;


        },
        CheckNewPwRule:function () {
            if(this.state.passWordLevel == 'original' ||
               this.state.passWordLevel == 'low'){
                this.setState({ExistPwLow: true});
            }else{
                this.setState({ExistPwLow: false});
            }

        },
        CheckPwTwiceSame:function () {
            if(this.state.passwordNew != this.state.passwordVertify){
                this.setState({ExistPwNotSame:true})
            }else{
                this.setState({ExistPwNotSame:false})
            }

        },
        showFormatErr:function () {

            var styleObj = {};

            if(this.state.ExistNoSupWord == true){
                styleObj = {display: 'block'};
            }else{
                styleObj = {display: 'none'};
            }

            return styleObj;

        },
        showUnsamePwErr:function () {
            var styleObj = {};

            if(this.state.ExistPwNotSame ){
                styleObj = {display: 'block'};
            }else{
                styleObj = {display: 'none'};
            }

            return styleObj;

        },
        showPwTooLowErr:function () {
            var styleObj = {};

            if(!this.state.ExistNoSupWord && this.state.ExistPwLow){
                styleObj = {display: 'block'};
            }else{
                styleObj = {display: 'none'};
            }

            return styleObj;

        },
        backTologin:function () {
            window.location.href="http://" + location.host+'/login';

        },
        refuseSumit:function (e) {
            e.preventDefault();
            return false;

        },
        render:function() {
            var data = this.state.data;
            return ~init;
        }
    });

    if(typeof ReactDOM != "undefined") {
        ReactDOM.render(<PageComponent data={storage}/>, document.getElementById('container'));
    }
    module.exports = PageComponent;
});